<template>
  <div class="attractions">
    <headers></headers>
    
    <!-- 搜索区域 -->
    <div class="search-section">
      <div class="search-container">
        <div class="search-box">
          <i class="fas fa-search search-icon"></i>
          <el-input
            v-model="searchParams.name"
            placeholder="搜索您感兴趣的景点..."
            @keyup.enter="searchPage"
            clearable
          >
            <template #suffix>
              <el-button 
                class="search-btn"
                type="primary"
                @click="searchPage"
              >
                搜索
              </el-button>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <!-- 景点列表 -->
    <div class="attractions-container">
      <transition-group name="fade" tag="div" class="attractions-grid">
        <div 
          v-for="(item, index) in tableData" 
          :key="item.id || index"
          class="attraction-card"
          :style="{ animationDelay: `${index * 0.1}s` }"
        >
          <div class="card-image">
            <img :src="item.images.split(',')[0]" :alt="item.name">
            <div class="image-overlay">
              <div class="overlay-content">
                <h3>{{ item.name }}</h3>
                <el-button 
                  type="primary" 
                  class="book-btn"
                  @click="toInfo(item.id)"
                >
                  立即预约
                </el-button>
              </div>
            </div>
          </div>
          <div class="card-content">
            <h3>{{ item.name }}</h3>
            <p>{{ item.introduce }}</p>
            <div class="card-footer">
              <el-button 
                type="primary" 
                class="details-btn"
                @click="toInfo(item.id)"
              >
                查看详情
              </el-button>
            </div>
          </div>
        </div>
      </transition-group>

      <!-- 分页器 -->
      <div class="pagination-wrapper">
        <el-pagination
          background
          :page-size="searchParams.pageSize"
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="total"
          class="custom-pagination"
        >
        </el-pagination>
      </div>
    </div>

    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysAttractionsPage } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  name: 'Attractions',
  components: {
    headers,
    bottoms
  },
  data() {
    return {
      searchParams: {
        name: "",
        state: 1,
        pageSize: 12,
        pageNumber: 1,
      },
      total: 0,
      tableData: [],
      loading: false
    }
  },
  methods: {
    searchPage() {
      this.searchParams.pageNumber = 1
      this.getSysAttractionsPage()
    },
    async getSysAttractionsPage() {
      try {
        this.loading = true
        const res = await getSysAttractionsPage(this.searchParams)
        if (res.code === 1000) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      } catch (error) {
        console.error('获取景点数据失败:', error)
        this.$message.error('获取数据失败，请稍后重试')
      } finally {
        this.loading = false
      }
    },
    toInfo(id) {
      this.$router.push("/attractionsInfo?id=" + id)
    },
    handleCurrentChange(val) {
      this.searchParams.pageNumber = val
      this.getSysAttractionsPage()
    }
  },
  mounted() {
    this.getSysAttractionsPage()
  }
}
</script>


<style scoped>
.attractions {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 搜索区域样式 */
.search-section {
  padding: 40px 0;
  background: linear-gradient(135deg, #4381FF 0%, #2196F3 100%);
  margin-bottom: 40px;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.search-box {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  z-index: 2;
}

.el-input :deep(.el-input__inner) {
  padding-left: 40px;
  height: 50px;
  border-radius: 25px;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-btn {
  margin-right: 5px;
  border-radius: 20px;
}

/* 景点列表样式 */
.attractions-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.attractions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.attraction-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  animation: fadeInUp 0.6s ease forwards;
  opacity: 0;
}

.attraction-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.attraction-card:hover .card-image img {
  transform: scale(1.1);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.attraction-card:hover .image-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
}

.card-content p {
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-footer {
  margin-top: 20px;
  text-align: right;
}

/* 分页器样式 */
.pagination-wrapper {
  text-align: center;
  padding: 40px 0;
}

.custom-pagination {
  display: inline-block;
}

/* 动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-section {
    padding: 20px 0;
  }
  
  .attractions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .card-image {
    height: 180px;
  }
}
</style>